<template>
    <view class="azm-organized-index flex flex-direction h100">
        <navBar ref="navBar" :options="navigationBarOptions" mode="search-custom"
                @navBarLoad="handleNavBarLoad"
                to="/pages/organized/operate/search"/>
        <view class="flex-sub overflow-hidden">
            <scroll-view scroll-y class="h100">
                <view class="azm-header flex align-center justify-start">
                    <view class="azm-header-avatar">
                        <view class="azm-avatar-image">
                            <image class="image" lazy-load v-if="info.logo !== false"
                                   :src="info.logo | ic_image_filter"
                                   mode="aspectFill" @error="handleImageError(info, 'logo','company')"/>
                        </view>
                    </view>
                    <view class="azm-header-right flex-sub">
                        <view class="azm-hr-title azm-ellipsis--l1">
                            <text>{{ info.company_name || "" }}</text>
                        </view>
                        <view class="azm-hr-footer flex align-center justify-between">
                            <view class="cu-tag flex align-center round"
                                  :class="'azm-color-' + info.audit"
                                  @tap.stop="handleToCompanyAuth">
                                <text class="tlIcon-v azm-icon"></text>
                                <text v-if="info.audit === 3">认证失败</text>
                                <text v-else-if="info.audit === 2">已认证</text>
                                <text v-else-if="info.audit === 1">待审核</text>
                                <text v-else>未认证</text>
                            </view>
                            <button class="cu-btn line-blue no-border"
                                    @tap.stop="handleInviteMember">邀请成员
                            </button>
                        </view>
                    </view>
                </view>
                <view class="azm-padding-bottom-50">
                    <member-list :branchList="branchList" show-slot
                                 @tapPopup="handleOperateTapPopup($event, branchList)">
                        <view slot="header" class="cu-item" @tap.stop="handleToTeam">
                            <view class="content">
                                <text>公司团队({{ info.num | ic_number_filter }})</text>
                            </view>
                        </view>
                    </member-list>
                    <!--部门创建-->
                    <view class="cu-list menu margin-top-sm">
                        <view class="cu-item" v-if="userInfo.role < 2"
                              @tap.stop="handleToLoginLink('/pages/organized/operate/branch-form')">
                            <view class="content">
                                <view class="flex align-center justify-start pr">
                                    <text class="tlIcon-add_department azm-icon-add"></text>
                                    <text>创建部门</text>
                                    <tl-tooltips v-if="isShowToolTip" :value="true" :x="24" :y="40"
                                                 placement="top-start" theme="blue">
                                        <view class="azm-tooltips-text" slot="text">创建第一个部门吧～</view>
                                    </tl-tooltips>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import { mapState } from "vuex";
    import tlTooltips from "@/components/tl-ui/tooltips/index.vue";
    import memberList from "../../components/member-list";

    export default {
        components: {tlTooltips, memberList},
        computed: {
            ...mapState({
                userInfo: (state) => state.System.userInfo,
            }),
        },
        data () {
            return {
                isShowToolTip: false, //是否展示创建第一个闷闷
                navigationBarOptions: {
                    title: "",
                    placeholder: "输入同事名称进行搜索",
                    disabled: true,
                },
                navBarTop: 0,
                info: {
                    audit: "", // 认证状态，1为已认证，非1为未认证
                    company_name: "", // 公司名称
                    logo: false, // logo
                    num: 0, // 部门人数
                },
                branchList: [],
            };
        },
        mounted () {
            this.loadData();
        },
        props: {
            bottom: {
                type: Number,
                default: 50,
            },
        },
        methods: {
            handleRefresh () {
                this.loadData();
            },
            async loadData () {
                const vm = this;
                const branchList = this.$Storage.getStorageSync("branchList_home_data");
                if (branchList && Array.isArray(branchList)) this.branchList = branchList;
                const result = await this.$ajax.Organized.getOrganizeList();
                if (result.code === 0) {
                    vm.info = vm.$util.mapKeys(result.data, {}, Object.keys(vm.info));
                    if (result.data.department_vos) {
                        this.branchList = result.data.department_vos.map((val) => {
                            return {
                                value: val.name,
                                num: val.num,
                                id: val.id,
                                level: 0,
                                role: val.role || 3,
                                type: 1,
                                showPopups: false,
                            };
                        });
                        this.$Storage.setStorageSync("branchList_home_data", this.branchList, "1d");
                        if (this.branchList.length === 0) {
                            this.isShowToolTip = true;
                            setTimeout(() => {
                                this.isShowToolTip = false;
                            }, 5000);
                        }
                    }
                } else {
                    this.$toast.text(result.message);
                }
            },
            handleToTeam () {
                this.handleToLoginLink({
                    path: "/pages/organized/index",
                });
            },
            handleToCompanyAuth () {
                if (this.userInfo.role >= 2) return;
                switch (this.info.audit) {
                    case 3:
                        this.$$router.push({
                            path: "/pages/mine/authentication/fail",
                        });
                        break;
                    case 2:
                        this.$$router.push({
                            path: "/pages/mine/authentication/getInformation",
                        });
                        break;
                    case 0:
                        this.$$router.push({
                            path: "/pages/mine/authentication/index",
                        });
                        break;
                    case 1:
                        this.$$router.push({
                            path: "/pages/mine/authentication/success",
                        });
                        break;
                }
            }
        },
    };
</script>

<style scoped lang="scss">
    .cu-list.menu {
        overflow: initial;

        > .cu-item {
            min-height: 55*2upx;

            .content {
                .txt {
                    font-size: 17*2upx;
                    font-weight: 400;
                    color: #191919;
                }

                .azm-icon-add {
                    color: #0075FF;
                    font-size: 25*2upx;
                    width: 25*2upx;
                    margin-right: 8*2upx;
                }
            }
        }
    }

    .azm-header {
        background: #fff;
        padding: 16 * 2upx 14 * 2upx;

        .azm-header-avatar {
            .azm-avatar-image {
                width: 58 * 2upx;
                height: 58 * 2upx;
                border-radius: 100%;
                border: $cu-avatar-border-1px;

                .image {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                }
            }

            margin-right: 8 * 2upx;
        }

        .bg-orange {
            background: rgba(255, 153, 24, 0.1);
            color: #ff9918;
        }

        .no-border {
            border: none;

            &:after {
                border: none;
            }
        }

        .azm-hr-title {
            font-size: 17 * 2upx;
            font-weight: bold;
            height: 24 * 2upx;
            line-height: 24 * 2upx;
            letter-spacing: 1 * 2upx;
        }

        .azm-hr-footer {
            margin-top: 12 * 2upx;

            .cu-btn {
                height: 22 * 2upx;
                padding: 0;
            }

            .cu-tag {
                height: 22 * 2upx;
                font-size: 11 * 2upx;
                font-weight: 500;
                line-height: 16 * 2upx;
                color: #a2a8a8;
                background: rgba(162, 168, 168, 0.17);
                padding: 0 8*2upx 0 6*2upx;

                &.azm-color-2 {
                    background: rgba(255, 153, 24, 0.1);
                    color: #ff9918;
                }

                .azm-icon {
                    font-size: 16 * 2upx;
                    margin-right: 1*2upx;
                }
            }
        }
    }

    .azm-organized-index {
        .cu-item {
            min-height: 55 * 2upx;

            .content {
                text {
                    font-size: 17 * 2upx;
                    font-weight: 400;
                    color: #191919;
                }

                .azm-icon-add {
                    color: #0075ff;
                    font-size: 24 * 2upx;
                    margin-right: 8 * 2upx;
                }
            }
        }
    }

    .azm-tooltips-text {
        padding: 9 * 2upx 10 * 2upx 9 * 2upx;
        font-size: 13 * 2upx;
        font-weight: 400;
        line-height: 18 * 2upx;
    }

    .azm-more-icon {
        font-size: 20 * 2upx;
        color: #c3c3c3;
    }
</style>
